<template>
  <div class="rank">
    <div class="topnav">
      <ul class="top">
        <!-- <li @click="index = 0" :class="{ con: index == 0 }">人气榜</li>
        <li @click="index = 1" :class="{ con: index == 1 }">男生榜</li>
        <li @click="index = 2" :class="{ con: index == 2 }">女生榜</li>
        <li @click="index = 3" :class="{ con: index == 3 }">新作榜</li> -->
        <li
          v-for="(item, i) in title"
          :key="i"
          @click="
            index = i;
            change();
          "
          :class="{ con: index == i }"
        >
          {{ item }}
        </li>
      </ul>
      <div :class="['content', { con: index == 0 }]">
        <div
          class="item"
          v-for="(item, index) in ranklist"
          :key="item.comic_id"
          @click="gotoPassage(item.comic_id)"
        >
          <div class="left">
            <div class="img">
              <img :src="item.vertical_cover" alt="" />
            </div>
            <div class="text">
              <h3>{{ item.title }}</h3>
              <p>共{{ item.last_ord }}话</p>
              <p class="author">{{ item.author[0] }}</p>
              <div class="replace" v-if="item.styles[0]?.name">
                <span>{{ item.styles[0]?.name }}</span>
              </div>
            </div>
          </div>
          <div class="number">{{ index + 1 }}</div>
        </div>
      </div>
      <div :class="['content', { con: index == 1 }]">
        <div
          class="item"
          v-for="(item, index) in ranklist"
          :key="item.comic_id"
          @click="gotoPassage(item.comic_id)"
        >
          <div class="left" v-if="item.author">
            <div class="img">
              <img :src="item.vertical_cover" alt="" />
            </div>
            <div class="text">
              <h3>{{ item.title }}</h3>
              <p>共{{ item.last_ord }}话</p>
              <p class="author">{{ item.author[0] }}</p>
              <div class="replace" v-if="item.styles[0]?.name">
                <span>{{ item.styles[0]?.name }}</span>
              </div>
            </div>
          </div>
          <div class="number">{{ index + 1 }}</div>
        </div>
      </div>
      <div :class="['content', { con: index == 2 }]">
        <div
          class="item"
          v-for="(item, index) in ranklist"
          :key="item.comic_id"
          @click="gotoPassage(item.comic_id)"
        >
          <div class="left" v-if="item.author">
            <div class="img">
              <img :src="item.vertical_cover" alt="" />
            </div>
            <div class="text">
              <h3>{{ item.title }}</h3>
              <p>共{{ item.last_ord }}话</p>
              <p class="author">{{ item.author[0] }}</p>
              <div class="replace" v-if="item.styles[0]?.name">
                <span>{{ item.styles[0]?.name }}</span>
              </div>
            </div>
          </div>
          <div class="number">{{ index + 1 }}</div>
        </div>
      </div>
      <div :class="['content', { con: index == 3 }]">
        <div
          class="item"
          v-for="(item, index) in ranklist"
          :key="item.comic_id"
          @click="gotoPassage(item.comic_id)"
        >
          <div class="left" v-if="item.author">
            <div class="img">
              <img :src="item.vertical_cover" alt="" />
            </div>
            <div class="text">
              <h3>{{ item.title }}</h3>
              <p>共{{ item.last_ord }}话</p>
              <p class="author">{{ item.author[0] }}</p>
              <div class="replace" v-if="item.styles[0]?.name">
                <span>{{ item.styles[0]?.name }}</span>
              </div>
            </div>
          </div>
          <div class="number">{{ index + 1 }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      index: 0, //下标
      title: ["人气榜", "男生榜", "女生榜", "新作榜"],
      ranklist: [],
    };
  },
  methods: {
    change() {
      this.axios
        .get(`https://apis.netstart.cn/mbcomic/HomeHot?type=${this.index}`)
        .then((res) => {
          this.ranklist = res.data.data;
          // console.log(this.ranklist);
        });
    },
    gotoPassage(comic_id) {
      this.$router.push({
        path: "/passage",
        query: {
          id: comic_id,
        },
      });
    },
  },
  created() {
    this.axios
      .get("https://apis.netstart.cn/mbcomic/HomeHot?type=0")
      .then((res) => {
        this.ranklist = res.data.data;
        // console.log(this.ranklist);
      });
  },
};
</script>

<style lang="scss" scoped>
.rank {
  .topnav {
    margin-top: 50px;

    .content {
      display: none;
      padding: 0px 12px;
      margin-top: 70px;
      padding-bottom: 50px;
      .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        .left {
          display: flex;
          .img {
            width: 85px;
            height: 110px;
            margin-right: 5px;
            img {
              width: 85px;
              height: 100%;
            }
          }
          .text {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            h3 {
              font-size: 16px;
              font-weight: bold;
              color: #333;
            }
            P {
              font-size: 14px;
              color: #666;
              // margin: 5px 0px;
            }

            .replace {
              display: flex;
              span {
                font-size: 12px;
                color: #666;
                // width: 36px;
                padding: 0px 5px;
                height: 20px;
                line-height: 19px;
                text-align: center;
                border: 1px solid #999;
                border-radius: 15px;
              }
            }
          }
        }
        .number {
          width: 40px;
          text-align: center;
          font-size: 16px;
          color: #666;
          // font-weight: 600;
        }
      }
    }
    .content.con {
      display: block;
    }
    ul {
      display: flex;
      justify-content: space-around;
      width: 100%;
      position: fixed;
      top: 30px;
      // left: 0;
      li {
        width: 70px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        color: #666;
      }
      .con {
        border-bottom: 3px solid red;
        color: #000;
        font-weight: bold;
      }
    }
  }
  .van-loading--vertical {
    margin-top: 300px;
  }
}
</style>